import React, { useEffect, useLayoutEffect } from 'react'

export default function App() {


    /*
        其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。
        可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，
        useLayoutEffect 内部的更新计划将被同步刷新。

        如果你正在将代码从 class 组件迁移到使用 Hook 的函数组件，则需要注意 
        useLayoutEffect 与 componentDidMount、componentDidUpdate 的
        调用阶段是一样的。但是，我们推荐你一开始先用 useEffect，只有当它出问题
        的时候再尝试使用 useLayoutEffect。

        两个 hooks 的使用是完全一致，区别是执行的时机不同
    */

    useEffect(() => {
        console.log('useEffect');
    }, [])

    // 该 hooks 会在浏览器重新绘制屏幕之前触发
    useLayoutEffect(() => {
        console.log('useLayoutEffect');
    }, [])

    return (
        <div>App</div>
    )
}
